<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>新增页面</title>
		<link href="../../static/component/pear/css/pear.css" rel="stylesheet" th:href="@{/static/component/pear/css/pear.css}"/>
	</head>
	<body>
		<form class="layui-form" action="">
			<div class="mainBox">
				<div class="main-container">
					<div class="layui-form-item">
						<label class="layui-form-label">选择菜单</label>
						<div class="layui-input-block">
							<div id="demoTree" class="layui-input"></div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">菜单类型</label>
						<div class="layui-input-block" onclick="gettypechangecss()">
							<input type="radio" name="type" value="0" title="目录" checked>
							<input type="radio" name="type" value="1" title="菜单">
							<input type="radio" name="type" value="2" title="按钮">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">菜单名称</label>
						<div class="layui-input-block">
							<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入菜单名称"
								class="layui-input">
						</div>
					</div>
					<div id="href">
						<div class="layui-form-item">
							<label class="layui-form-label">请求地址</label>
							<div class="layui-input-block">
								<input type="text" name="href" lay-verify="title" autocomplete="off" placeholder="请输入请求地址"
									   class="layui-input">
							</div>
						</div>
					</div>
					<div id="openType">
						<div class="layui-form-item">
							<label class="layui-form-label">打开方式</label>
							<div class="layui-input-block">
								<select name="openType">
									<option value="">页签</option>
									<option value="_iframe">新窗口</option>
								</select>
							</div>
						</div>
					</div>
					<div id="power_code">
						<div class="layui-form-item">
							<label class="layui-form-label">权限标识</label>
							<div class="layui-input-block">
								<input type="text" name="power_code" lay-verify="title" autocomplete="off" placeholder="请输入权限标识"
									   class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">显示排序</label>
						<div class="layui-input-block">
							<input type="number" name="sort" lay-verify="title" autocomplete="off" placeholder="请输入排序"
								class="layui-input">
						</div>
					</div>
					<div  id="icon">
						<div class="layui-form-item">
							<label class="layui-form-label">图标选择</label>
							<div class="layui-input-block">
								<input type="text" name="icon" id="iconPicker2" value="" lay-filter="iconPicker2">
							</div>
						</div>
					</div>
					<div id="enable">
						<div class="layui-form-item">
							<label class="layui-form-label">菜单状态</label>
							<div class="layui-input-block">
								<input type="radio" name="enable" value="1" title="显示" checked>
								<input type="radio" name="enable" value="0" title="隐藏">
							</div>
						</div>
					</div>

				</div>
			</div>
			<div class="bottom">
				<div class="button-container">
					<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
						lay-filter="power-save">
						<i class="layui-icon layui-icon-ok"></i>
						提交
					</button>
					<button type="reset" class="pear-btn pear-btn-sm">
						<i class="layui-icon layui-icon-refresh"></i>
						重置
					</button>
				</div>
			</div>
		</form>
		<script src="../../static/component/layui/layui.js" th:src="@{/static/component/layui/layui.js}"></script>
		<script src="../../static/component/pear/pear.js" th:src="@{/static/component/pear/pear.js}"></script>
		<script>
			let $ = layui.jquery;
			layui.use(['form', 'jquery','dtree','iconPicker'], function() {
				let form = layui.form;
				let $ = layui.jquery;
				let dtree = layui.dtree;
				let icon = layui.iconPicker;
				icon.render({
					elem: '#iconPicker2',
					type: 'fontClass',
					search: true,
					page: true,
					limit: 16,
					click: function(obj) {
						console.log(obj)
					},
					ready: function() {
						console.log(1)
					}
				});


				dtree.render({
					elem: "#demoTree",
					initLevel: "1",
					method: 'get',
					skin: "zdy",
					dataStyle: "layuiStyle",// 指定数据格式  list 格式
					response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
					url: "/system/power/menustree",
					select: true,
					accordion: true,  // 开启手风琴
					selectInputName: {
						nodeId: "parent_id",  // 这里，内置表单名称为parent_id，值为nodeId的值
						context: "parent_idname"  // 这里，内置表单名称为title，值为context的值
					}
				});

				form.on('submit(power-save)', function(data) {
					$.ajax({
						data: JSON.stringify(data.field),
						dataType: 'json',
						url: "/system/power/add",
						contentType: 'application/json',
						type: 'post',
						success: function(result) {
							if (result.code === 0) {
								layer.msg(result.msg, {
									icon: 1,
									time: 1000
								}, function() {
									parent.layer.close(parent.layer.getFrameIndex(window
										.name)); //关闭当前页
									parent.layui.treetable.reload("#power-table");
								});
							} else {
								layer.msg(result.msg, {
									icon: 2,
									time: 1000
								});
							}
						},
						error:function () {
							layer.alert("网络错误")
						}
					})
					return false;
				});
			})
			function gettypechangecss() {
				let number = $("input[name='type']:checked").val();
				if (number === "0"){
					// console.log("进入了"+number)
					$("#href").css("display","");
					$("#openType").css("display","");
					$("#icon").css("display","");
					$("#enable").css("display","");
					$("#power_code").css("display","");

					$("#href").css("display","none");
					$("#openType").css("display","none");
					$("#power_code").css("display","none");
				}
				if (number === "1"){
					// console.log("进入了"+number)
					$("#href").css("display","");
					$("#openType").css("display","");
					$("#icon").css("display","");
					$("#enable").css("display","");
					$("#power_code").css("display","");
				}
				if (number === "2"){
					// console.log("进入了"+number)
					$("#href").css("display","");
					$("#openType").css("display","");
					$("#icon").css("display","");
					$("#enable").css("display","");
					$("#power_code").css("display","");

					$("#href").css("display","none");
					$("#openType").css("display","none");
					$("#icon").css("display","none");
					$("#enable").css("display","none");
				}
				console.log(number)
			}
		</script>
	</body>
</html>
